<template>
  <div
    class="cover-box"
    :class="{
      'cover-box-hd': !visible,
      'cover-box-auto': visible,
    }"
  >
    <div class="cover-box-shadow" v-if="ifShadow">
      <span @click="visible = !visible">{{ !visible ? '查看完整图片' : '收起' }}</span>
    </div>
    <img
      v-if="props.cover"
      :src="urls + props.cover + '?imageView2/3/format/webp'"
      alt=""
      :id="'img-class' + props.id"
    />
    <!-- t-image--fit-cover t-image--position-center -->
  </div>
  <!-- <t-image-viewer v-model:visible="visible" :images="[urls + props.cover]"> </t-image-viewer> -->
</template>

<script setup lang="ts">
// @ts-nocheck
import { urls } from '@/utils/request/upload';
import { ref, onMounted, watch } from 'vue';
const visible = ref(false);
const ifShadow = ref(true); //遮罩层是否展示
const props = defineProps({
  id: {
    type: Number,
  },
  cover: {
    type: String,
  },
});
const init = () => {
  try {
    // console.log('触发');
    var img = new Image();
    img.src = urls + props.cover + '?imageView2/3/format/w/630/webp';
    img.onload = function () {
      var div = document.getElementById('img-class' + props.id);
      var w = div.offsetWidth;
      var targetWidth = w; // 设置目标宽度
      var ratio = targetWidth / this.width; // 计算宽度比例
      var targetHeight = this.height * ratio; // 根据比例计算目标高度

      if (targetHeight > 254) {
        console.log('zhanshi');
        ifShadow.value = true;
      } else {
        ifShadow.value = false;
      }
    };
  } catch (err) {
    console.log(err);
  }
};

onMounted(() => {
  init();
  // var div = document.getElementById('img-class' + props.id);
  // if (div?.offsetWidth > 254) {
  //   ifShadow.value = true;
  // }
  //   var w = div.offsetWidth; // 返回元素的总宽度
  //   var h = div.offsetHeight; // 返回元素的总高度
  //   alert('div.offsetHeight =' + w);
});
watch(
  () => props.cover,
  () => {
    init();
  },
  { deep: true },
);
</script>

<style scoped lang="less">
.cover-box {
  // display: flex;
  position: relative;
  width: 100%;
  //   height: auto;

  margin-bottom: 26px;
  img {
    display: flex;
    width: 100%;
    // height: auto;
  }
}
.cover-box-hd {
  max-height: 254px;
  overflow: hidden;
}
.cover-box-auto {
  height: auto;
}
.cover-box-shadow {
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 22px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0px 2px 4px 0px #00000014;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 51.86%);

  span {
    cursor: pointer;
    font-family: PingFang SC;
    font-size: 17px;
    font-weight: 700;
    line-height: 27px;
    color: #ffffff;
  }
}
.cover-box:hover {
  .cover-box-shadow {
    opacity: 1;
  }
}
</style>
